<template>
  <Nav :showBlack="false">
    <img src="../assets/title.png" class="logo" alt=""  >
  </Nav>
  <div class="page">
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000"  indicator-color="white" lazy-render>
        <van-swipe-item v-for="(item,index) in banner_data" :key="item.cover_image">
<!--          <img :src="" alt="">-->
<!--          {{item.cover_image}}-->
          <img :src="item.cover_image" class="bannerImg" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="tabs">
      <div class="tab" @click="changeTab(index)" v-for="(item,index) in tab_data" :class="{active:index === current_tab}" :key="index">
        {{item}}
      </div>
    </div>
    <div class="items" v-show="current_tab == 0">
      <div class="item"  v-for="(item,index) in all_data" :key="item.id">
        <div class="border">
          <div class="imgBox" @click="goDetail(item.id)" :style="{ backgroundImage: `url(${item.cover_image})`}"></div>
          <div class="nameBox">
            <div class="name">{{item.name}}</div>
            <div class="control">
              <div class="viewBox">
                <img src="../assets/look.png" alt="">
                <span>{{item.browse_count}}</span>
              </div>
              <div class="likeBox" v-show="item.has_like == 0" @click="collection(item)">
                <img src="../assets/like.png" alt="">
                <span>{{item.like_count}}</span>
              </div>
              <div class="likeBox" v-show="item.has_like == 1" @click="uncollection(item)">
                <img src="../assets/collect-a.png" alt="">
                <span>{{item.like_count}}</span>
              </div>
            </div>
          </div>
          <div class="info">
            {{removeTags(item.descript)}}
          </div>
        </div>
      </div>
    </div>
    <div class="items" v-show="current_tab == 1">
        <div class="item2 imgbox" :style="{ backgroundImage: `url(${item.cover_image})`}" @click="goSpecil(item)" v-for="(item,index) in spec_data" :key="item.id"></div>
    </div>
  </div>
  <Footer/>
</template>
<script setup>
import { api } from '@/utils/api';
import { useRouter } from 'vue-router'
import { onMounted, reactive, ref, onActivated, nextTick } from 'vue';
import Footer from '@/components/tab.vue'
import Nav from '@/components/nav.vue'
import { showToast } from 'vant';
import { removeTags } from '@/utils/utils'

const router = useRouter();
let tab_data = reactive(['全部','专区']);
let onoff = ref(false);
let banner_data = reactive([])
let all_data = reactive([])
let spec_data = reactive([])
let current_tab = ref(0);

async function bannerData() {
  const res = await api('/api/index/banner_list','post',{})
  banner_data.push(...res);
}

async function getIndexData() {
  const res = await api('/api/index/collection_list','post',{type:1})
  console.log(res)
  all_data.push(...res)
  // console.log(all)
}

async function getSpecil() {
  const res = await api('/api/index/collection_list','post',{type:2})
  spec_data.push(...res)
  console.log(spec_data)
}

async function collection (item) {
  const res = await api('/api/index/collection_classify_like','post',{id:item.id})
  //console.log(res);
  if(Array.isArray(res)) {
    item.has_like = 1;
    item.like_count ++;
    showToast('点赞成功');
  }
}

async function uncollection (item) {
  const res = await api('/api/index/collection_classify_cancle_like','post',{id:item.id})
  //console.log(res);
  if(Array.isArray(res)) {
    item.has_like = 0
    item.like_count --;
    showToast('取消点赞成功');
  }
}


onMounted(() => {
  bannerData();
  getIndexData();
})

const goDetail = (id) => {
  router.push({path:'detail',query:{id:id}})
}
const changeTab = (index) => {
  current_tab.value = index;
  if(index == 1) {
    if(!onoff.value) {
      getSpecil();
      onoff.value = true;
    }
  }
}
const goSpecil = (item) => {
  router.push({path:'speDetail',query:{id:item.id}})
}

const goTest = () => {
  router.push({path:'test'})
}
</script>
<style scoped lang="scss">
.page {
  background-color: #0f1830;
  padding-top: 170px;
  padding-bottom: 200px;
  color:#fff;
}
.logo {
  height: 50px;
  width: auto;
}
.banner {
  width: 100%;
  height:520px;
  padding: 0 60px;
  overflow: hidden;
  margin-bottom: 50px;
}
.my-swipe {
  border-radius: 24px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  //font-size: 20px;
  //line-height: 150px;
  //text-align: center;
  //background-color: #39a9ed;
  height: 520px;
  .bannerImg {
    width: 100%;
    height: 100%;
    border:none;
  }
}
.tabs {
  padding: 0 60px;
  color:#fff;
  display: flex;
  margin-bottom:40px;
  .tab {
    font-size: 40px;
    margin-right: 30px;
    padding: 20px 40px;
    border-radius: 35px;
    font-weight: bold;
    color:#aeaeae;
    &.active {
      background: #f4e9ce;
      color:#222222;
    }
  }
}
.items {
  padding: 0 60px;
  .border {
    border:1px solid #4b4e55;
    border-radius: 24px;
    padding: 49px;
    .imgBox {
      width: 100%;
      height: 750px;
      border-radius: 24px;
      margin-bottom: 50px;
    }
  }
  .item2 {
    width: 100%;
    height: 500px;
    border-radius: 20px;
    margin-bottom: 50px;
    background-size: cover;
    background-position: center;
  }
  .item {
    margin-bottom: 60px;
    .nameBox {
      display: flex;
      justify-content: space-between;
      height: 90px;
      .name {
        font-size: 46px;
      }
    }
    .control {
      display: flex;
      justify-content: space-between;
      height: 90px;
      > div {
        margin-left: 40px;
        font-size: 40px;
        img {
          height: 40px;
          width: auto;
          margin-right:10px;
          vertical-align: text-bottom;
        }
      }
    }
    .info {
      height: 350px;
      overflow: hidden;
      font-size: 36px;
      line-height: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      //word-break: keep-all; //到单词换行
      word-break: break-word;
      white-space: normal;
      text-overflow: ellipsis;
      overflow-wrap: break-word;
    }
  }
}
</style>

